const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin");
const Webpack = require("webpack");
const OptimizeCSSAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = { // 配置 webpack
    mode: "production", // 指定 webpack 的打包模式【 development、production 】
    // entry: "./src/index.js", // 指定 webpack 入口
    entry: {
        home: "./src/index.js",
        other: "./src/other.js",
    },
    output: {
        // filename: "bundle.[hash:8].js", // 指定 webpack 打包出来的文件的名称
        filename: "[name].[hash:8].js", // 指定 webpack 打包出来的文件的名称
        path: path.resolve(__dirname, "dist"), // 指定 webpack 打包的产出路径【这块的路径必须是一个绝对路径，这里规定为项目根目录的 dist 目录。可以添加 [hash] 每次 build 的时候都会生成新的文件，来防止浏览器缓存问题、冒号8 表示只显示 8 位的 hash 值 】
    },
    devServer: {
        contentBase: "./dist", // 指定 dev-server 的服务器目录
        progress: true, // 在启动静态服务器时显示进度条
        port: 3010, // 指定端口号
        open: true, // 自动打开浏览器
        compress: true, // 为所有服务启用 gzip 压缩
        proxy: { // 【 处理跨域问题 】
            "/api": "http://localhost:3005",
            pathRewrite: { "/api": "", }, // 重写请求地址，将 api 替换成空
        },
        // before(app) { // 钩子【 mock 数据的时候可以使用 】
        //     app.get("/api/user", (req, res) => {
        //         res.json({
        //             name: "FruitJ",
        //         });
        //     });
        // },
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html", //【 指定以哪个 html 文件为模板自动生成打包后的 html 文件 】
            filename: "index.html", //【指定打包后的 html 文件的名称】
            hash: true, //【在引入 bundle 的时候后面加上 hash 值来防止浏览器的缓存问题】
            minify: { // 【压缩打包后的 html 配置项】
                removeAttributeQuotes: true, // 删除所有双引号
                collapseWhitespace: true, // 删除所有折叠行
            },
            chunks: ["home"],
        }),
        new HtmlWebpackPlugin({
            template: "./src/other.html", //【 指定以哪个 html 文件为模板自动生成打包后的 html 文件 】
            filename: "other.html", //【指定打包后的 html 文件的名称】
            hash: true, //【在引入 bundle 的时候后面加上 hash 值来防止浏览器的缓存问题】
            minify: { // 【压缩打包后的 html 配置项】
                removeAttributeQuotes: true, // 删除所有双引号
                collapseWhitespace: true, // 删除所有折叠行
            },
            chunks: ["other"],
        }),
        new MiniCSSExtractPlugin({
            filename: "css/bundle.css",
        }),
        new CleanWebpackPlugin(), // 删除 dist 目录【默认就是删除 dist 目录所以不用传参数】
        new CopyWebpackPlugin({
            patterns: [
                { from: "doc", to: "./doc", },
            ],
        }),
        new Webpack.BannerPlugin("make 2021 by FruitJ"),
    ],
    module: { // 配置解析模块的众多规则
        rules: [
            { test: /\.css$/, use: [ 
                {
                    loader: MiniCSSExtractPlugin.loader,
                    options: {
                        publicPath: "../",
                    },
                }, "css-loader", "postcss-loader"], }, // 使用 css-loader
            { test: /\.less$/, use: [ 
                {
                    loader: MiniCSSExtractPlugin.loader,
                    options: {
                        publicPath: "../",
                    },
                }, "css-loader", "postcss-loader", "less-loader"], }, // 使用 less-loader
            { 
                test: /\.js$/, 
                use: ["babel-loader"], // 使用 babel-loader 进行 js 高级语法转换
                include: path.resolve(__dirname, "src"), // 只处理 src 下的 js 文件
                exclude: /node_modules/,
            },
            { 
                test: /\.(png|jpg|gif|webp|jpeg)$/, 
                use: { 
                    loader: "url-loader", 
                    options: { 
                        esModule:false,
                        limit: 1 * 1024,
                        outputPath: "./img/",
                        // publicPath: "https://www.baidu.com",
                    },
                } 
            },
            {
                test: /\.(svg|eot|ttf|woff|woff2)\??.*$/, 
                use: { 
                    loader: "url-loader", 
                    options: { 
                        esModule:false,
                        limit: 1 * 1024,
                        outputPath: "./iconfont/right/",
                        // publicPath: "https://www.baidu.com",
                    },
                } 
            },
            { 
                test: /\.html$/, 
                use: {
                    loader: "html-loader",
                    options: {
                        attrs: ['img:src', 'img:data-src', 'audio:src'],
                    }
                } 
            },
        //  { test: require.resolve("jquery"), use: "expose-loader?$", },
        //  { test: /\.js$/, use: {
        //     loader: "eslint-loader",
        //     options: {
        //         enforce: "pre", // pre 代表在下面的 loader 之前执行、post 相反
        //     },
        // },include: path.resolve(__dirname, "src"),exclude: /node_modules/, },
        ],
    },
    externals: { 
        jquery: "$",
    },
    optimization: {
        minimizer: [
            new UglifyJsWebpackPlugin({
                cache: true, // 是否开启缓存
                parallel: true, // 是否并行压缩
                sourceMap: true, // 是否开启源码映射
            }),
            new OptimizeCSSAssetsWebpackPlugin(),
        ],
    },
    devtool: "source-map",
    watch: true, // 开启监听
    watchOptions: {
        poll: 1000, // 每秒监听一次变化
        aggregateTimeout: 500, // 代码输入 500ms 后代码无变化的时候执行打包命令
    },
    resolve: {
        modules: [path.resolve("node_modules")], // 自定义指定导入资源的包的查找顺序
        extensions: [".js", ".css"], // 自定义指定导入资源省略后缀的查找顺序
        alias: { // 自定义指定导入资源的别名
            "bootstrap-css": "bootstrap/dist/css/bootstrap.min.css",
        },
    },
};